<template>
    <div>
      <div class="person-wrapsg" ref="personWrapsg">
        <!--v-for="a in indexaa"-->
        <ul class="person-listsg" ref="personTabsg">
          <li class="person-itemsg" >
                      <span v-for="a in indexaa">
                      <van-image
                        width="12rem"
                        height="11rem"
                        fit="contain"
                        style="display: inline-block;padding: 0 5px"
                        src="https://img.yzcdn.cn/vant/cat.jpeg"
                      />
                      </span>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "personScrollsg",
      data(){
          return{
            indexaa:5,
          }
      },
      created() {
        this.$nextTick(() => {
          this.personScrollsg();
      });
      },
      methods:{
        personScrollsg(){
          // 默认有六个li子元素，每个子元素的宽度为120px
          let width = 1 * 80;
          this.$refs.personTabsg.style.width = width + "rem";
          // this.$nextTick 是一个异步函数，为了确保 DOM 已经渲染
          this.$nextTick(() => {
            if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.personWrapsg, {
              startX: 0,
              click: true,
              scrollX: true,
              // 忽略竖直方向的滚动
              scrollY: false,
              eventPassthrough: "vertical"
            });
          } else {
            this.scroll.refresh();
          }
        });
        },
      }


    }
</script>

<style scoped>

</style>
